import Vue from 'vue'
import Vuex from 'vuex'



// 仓库,存静态值
const state = {
        count: 1
    }
    // 改变静态值
const mutations = {
    add(state) {
        state.count++; //在该state没暴露出去前使用,直接state.count 能取到值, 在其他组件使用,需要 $store.state.count取
        console.log(state.count); //每点击一次,这里的值都被改变
    },
    reduce(state, n) { //可以通过传参数,减法,参数直接在后面加,同时在点击的时候,也要传参数过来 state参数,进来的就是一个对象
        state.count -= n;
    }
}

// getters计算过滤操作
const getters = {
    count: state => state.count += 100
}

// actions异步修改状态

// actions是可以调用Mutations里的方法的
const actions = {
    addAction(context) { //context相当于上下文,相当于整个store
        context.commit('add', 10) //如果mutations没有需要传参,这里传参了,参数在这里是没作用的
        setTimeout(() => {
            context.commit('reduce', 10)
        }, 3000)
        console.log("我比reduce提前执行");
    },
    reduceAction({ commit }) { //第二种写法,不用context ,直接把commit当对象传进去  { commit },参数n，可以在参数的位置接收参数，下面1也要改成n
        commit('reduce', 1) //如果mutations需要传参,这里没传参 比如后面的数字1,会出现NAN现象
    } //这里调用的减法,就算是点击事件那边传参过来,也没用,也会只用这个1

}

// module模块组  一般项目,不建议使用模块组,除非项目特别特别大才使用
const moduleA={
  // namespaced: true,  //如果项目模块多，用这个区分模块   了解决不同模块命名冲突的问题，将不同模块的namespaced:true
  state,
  mutations,
  getters  ,
  actions
}

Vue.use(Vuex);

// export default new Vuex.Store({  //用到哪个,就暴露哪个出去
//   state,
//   mutations,
//   getters  ,
//   actions
// })

export default new Vuex.Store({
  // namespaced: true, //可有可无
  modules:{
    // 'abc':moduleA
    'a':moduleA
  }
})